<template>
	<div class="sidebar sidebar_nbhs_icon" id="sidebar">
		<el-menu class="sidebar-el-menu" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" unique-opened>
			<template v-for="(item, index) in menuList">
				<template v-if="item.children.length">
					<el-submenu :index="item.id" :key="item.id">
						<template slot="title">
							
							<div @click="openURL(item.url, isNew(item.url), item.name, item.id)">
								
								<i :class="item.icon || iconList[index % 6]"></i><span slot="title">{{ item.name }}</span>
							</div>
						</template>
						<div v-for="(subItem,index) in item.children" :key="subItem.id">
							<template v-if="!collapse">
								<el-submenu v-if="subItem.children.length" :index="subItem.id" :key="subItem.id">
									<template slot="title" style="font-size:16px;">
										<div @click="openURL(subItem.url, isNew(subItem.url), subItem.name, subItem.id)">
											{{ subItem.name }}
										</div>
									</template>
									<el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.id" @click="openURL(threeItem.url, isNew(threeItem.url), threeItem.name, threeItem.id)">
										{{ threeItem.name }}
										<i class="el-icon-plus add-highLink" title="添加到高频链接" @click.stop="addHighLink(item.icon,threeItem.name,threeItem.url,threeItem.id)"></i>
									</el-menu-item>
								</el-submenu>
								<el-menu-item v-else :index="subItem.id" :key="subItem.id" @click="openURL(subItem.url, isNew(subItem.url), subItem.name, subItem.id)">
									{{ subItem.title }}
									<i class="el-icon-plus add-highLink" title="添加到高频链接" @click.stop="addHighLink(item.icon,subItem.name,subItem.url,subItem.id)"></i>
								</el-menu-item>

							</template>
							<template v-if="collapse">
								<div class="fold-title" @click="openURL(item.url, isNew(item.url), item.name, item.id)" v-if="index==0">{{ item.name }}</div>
								<dl class="fold-subpanel" v-if="subItem.children.length" :index="subItem.id" :key="subItem.id">
									<dt @click="openURL(subItem.url, isNew(subItem.url), subItem.name, subItem.id)">{{ subItem.name }}</dt>
									<dd v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.id" @click="openURL(threeItem.url, isNew(threeItem.url), threeItem.name, threeItem.id)">
										{{ threeItem.name }}
										<i class="el-icon-plus add-highLink" title="添加到高频链接" @click.stop="addHighLink(item.icon,threeItem.name,threeItem.url,threeItem.id)"></i>
										<span>|</span>
									</dd>
								</dl>
								<dl class="fold-subpanel" v-else :index="subItem.id" :key="subItem.id">
									<dt @click="openURL(subItem.url, isNew(subItem.url), subItem.name, subItem.id)">{{ subItem.name }}
										<i class="el-icon-plus add-highLink" title="添加到高频链接" @click.stop="addHighLink(item.icon,subItem.name,subItem.url, subItem.id)"></i>
									</dt>
								</dl>
							</template>
						</div>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.id" :key="item.id" @click="openURL(item.url, isNew(item.url), item.title, item.id)">
						<i :class="item.icon || iconList[index % 6]"></i><span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
import bus from '../common/bus';
import appUtil from '~/assets/utils/appUtil.js';
// import { createNamespacedHelpers } from 'vuex';
// const { mapState } = createNamespacedHelpers('homeModule');
import {
    createNamespacedHelpers
} from 'vuex';
const {
    mapMutations: mapTagMutations
} = createNamespacedHelpers('tagModule');
export default {
    data() {
        return {
            collapse: true,
            //isShow:true,
            menuList: [],
            iconList: ['el-icon-document', 'el-icon-setting', 'el-icon-date', 'el-icon-news', 'el-icon-edit',
                'el-icon-edit-outline'],
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    methods: {
        ...mapTagMutations([
            'addTag'
        ]),
        //进入系统后立即单点登录到8.0系统，以保证8.0的页面能正常打开
        /*ssoLogin(){

			  },*/
        isNew(url) {
            let reg = /(?:[?]|&)isNew=(\w*)(&|$)/;
            let res = reg.exec(url);
            return res && res[1] === 'true';
        },
        addHighLink(icon, title, url, id) {
            if (!url || url === '') {
                return;
            }

            let data = {
                'icon': icon,
                'menuId': id,
                'name': title,
                'url': url,
                'userCode': appUtil.getSes('userCode')
            };
            this.$axios.post('/ptp-engine/api/title', data);
            bus.$emit('val', data);
        },
        //openerURL用于命令式地打开新页签时记录母页签url，使用sidebar打开时不需要传
        openURL(url, isNew, title, id) {
            console.log(url);
            let menu = {
                url: url,
                id: id,
                isNew: isNew,
                name: title
            };
            this.addTag(menu);
            // this.menuNone();
        },
        // 点击菜单，菜单面板隐藏
        menuNone(){
			const document = process.client ? document : {};
            let ele = document.querySelectorAll('.el-menu--vertical');
            for(let i=0;i<ele.length;i++){
                ele[i].style.display='none';
            }
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
        });
        // /ptp-engine/apis/menu
        this.$axios.get('/ptp-engine/apis/menu').then(res2 => {
            let menu = res2.data.menuTree;
            let tempData = [];
            for (let i = 0; i < (menu ? menu.length : 0); i++) {
                tempData = tempData.concat(menu[i].children);
            }
            this.menuList = tempData;
        });

        // /ptp-page/apis/menu
        // ./data/menu.json
        // this.$axios.get('/ptp-engine/apis/menu').then( res2 => {
        //     let menu = res2.data.data;
        //     let tempData = [];
        //     for(let i = 0; i < (menu ? menu.length : 0); i++){
        //         tempData = tempData.concat(menu[i].subs);
        //     }
        //     this.menuList = tempData;
        // });

    },
    mounted() {

    }
};
</script>

<style scoped lang='scss'>
.sidebar_nbhs_icon{
	 .el-submenu__title {
		font-size: 14px;
		padding:0 18px!important;
	} 
}
.title_name{
	font-size: 18px!important;
	font-style:normal;
	letter-spacing: 2px;
	padding: 2px 4px;
	// border: 1px solid #ddd;
}
	.el-menu-item.is-active {
		color: rgb(191, 203, 217) !important;
	}

	a {
		color: #bfcbd9;
	}

	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		overflow-y: scroll;
		z-index: 0;
		// width: 100%; 
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 250px;
	}

	.sidebar>ul {
		height: 100%;
	}

	.fold-title {
		display: none;
		font-size: 16px;
		color: #bfcbd9;
		font-weight: bolder;
		
		padding: 8px 24px;
	}

	.fold-title:first-child {
		display: block;
	}

	.fold-subpanel {
		margin: 0;
		padding: 8px 24px;
		font-size: 14px;
		width: 600px;
		color: #bfcbd9;
		height: auto;
		line-height: 1.8;
		border-top: 1px solid #ddd;
	}

	.fold-subpanel dt {
		font-size: 14px;
		font-weight: bold;
		margin-right: 16px;
		display: block;
		cursor: pointer;
	}

	.fold-subpanel dd {
		display: inline-block;
		cursor: pointer;
		margin: 0px;
	}

	.fold-subpanel dd:last-child span {
		opacity: 0;
	}

	.fold-subpanel dd span {
		margin: 0px 16px;
	}

	.fold-subpanel dt:hover,
	.fold-subpanel dd:hover {
		color: #f7f7f7;
	}

	.fold-subpanel dd:hover span {
		color: #bfcbd9;
	}

	.el-menu-item i,
	.el-submenu__title i {
		color: #bfcbd9;
	}

	.el-menu-item i,
	.el-submenu__title i {
		font-size: 24px;
	}

	.el-menu-item,
	.el-submenu>div>span {
		font-size: 14px;
	}

	.el-menu-item i.add-highLink {
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -3px;
		font-size: 12px;
		opacity: 0;
	}

	.el-menu-item:hover i.add-highLink {
		opacity: 1;
	}

	.fold-subpanel i.add-highLink {
		margin-left: 5px;
		font-size: 12px;
		opacity: 0;
	}

	.fold-subpanel dd:hover>i.add-highLink,
	.fold-subpanel dt:hover>i.add-highLink {
		opacity: 1;
	}
</style>
<style>
	.el-menu--vertical {
		max-height: 100vh;
		overflow-y: auto;
	}
</style>
